{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px nav-left p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_vip"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl pb-4 shadow bg-white">
			<el-tabs v-model="search.status" :before-leave="tabsChange">
				<el-tab-pane label="全部" name="all"></el-tab-pane>
				<el-tab-pane label="可用" name="1"></el-tab-pane>
				<el-tab-pane label="不可用" name="0"></el-tab-pane>
				<el-tab-pane label="已使用" name="2"></el-tab-pane>
				<el-tab-pane label="已过期" name="-1"></el-tab-pane>
			</el-tabs>
			<div class="table-responsive">
				<el-table
					ref="multipleTable"
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;"
		    		header-cell-class-name="bg-1E54E5 text-666666">
			      <el-table-column
			        label="券名">
				      <template slot-scope="scope">
					   	<div>{{scope.row.title}}</div>
					   	<div class="small text-primary">
						   	<div v-if="scope.row.alias_list.length">{{scope.row.alias_list.join('，')}}</div>
						   	<div v-else>全品类</div>
						   	<div>{{scope.row.alias}}</div>
					   	</div>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="规则"
			        width="200">
				      <template slot-scope="scope">
				      	<div class="flex">
				      		<div class="flex" v-if="scope.row.satisfy_price>0">
						  		<div class="mr-2">满</div>
						    	<div>{{scope.row.satisfy_price}}</div>
						  		<div class="mx-2" v-if="scope.row.type">打</div>
						  		<div class="mx-2" v-else>减</div>
				      		</div>
					    	<div v-if="scope.row.type"><span v-if="scope.row.discount/10<10">{{scope.row.discount/10}}</span>折</div>
					    	<div v-else>{{scope.row.price}}元</div>
				    	</div>
				    	<div class="small" v-if="scope.row.start_time">{{scope.row.start_time}}可用</div>
		    			<div class="small" v-if="scope.row.vip_level>0">{{scope.row.vip_name}}可用</div>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="状态"
			        width="80">
				      <template slot-scope="scope">
				      	<span class="text-info" v-if="scope.row.status==-1">已过期</span>
				      	<span class="text-info" v-if="scope.row.status==0">不可用</span>
				      	<span class="text-success" v-if="scope.row.status==1">可使用</span>
				      	<span class="text-danger" v-if="scope.row.status==2">已使用</span>
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="receive_time"
			        label="获得时间"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="end_time"
			        label="过期时间"
			        width="120">
			      </el-table-column>
			    </el-table>
			</div>
			<div class="table-responsive py-3">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="search.page"
			      :page-size="10"
			      layout="total,  prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			search:{
				status:'all',
		    	ajax:false,
				total:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:XYBase.methods({
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			tabsChange(val){
				this.search.status=val;
				this.search.page=1;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							_this.tableData=ret.data.data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
		})
	});
</script>
{/block}